<template>
  <div :class="classes" @click="change"></div>
</template>

<script>
/**
 * author: zhengshundong
 * time: 2019-12-12
 * 声明：这个组件是为了替代checkBox组件产生的，原本的checkbox组件
 * 被渲染后有4层，这样在transfer组件大数据量 + 安可环境下会产生大
 * 量的dom，而这些dom仅仅是为了样式好看，所以这里对不采用aty-checkbox
 * 而是采用span伪checkBox，这样即能满足transfer的需求，也能对国产
 * 化下进行优化，此组件不对外暴露
 */
import config from "../../../../config/config.js";
const prefixCls = config.prefix + "-transfer-fake-checkbox";
export default {
  model: {
    prop: "currentCheck",
    event: "change"
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    },
    // 目前对于transfer组件没啥用，先注释
    // code: [String, Number],
    // label: String
  },
  data() {
    return {
      currentCheck: this.checked
    };
  },
  watch: {
    checked(newVal) {
      this.currentCheck = newVal;
    }
  },
  computed: {
    classes() {
      return [
        prefixCls,
        {
          [`${prefixCls}-active`]: this.currentCheck,
          [`${prefixCls}-disabled`]: this.disabled
        }
      ];
    }
  },
  methods: {
    change() {
      this.currentCheck = !this.currentCheck;
      this.$emit("change", this.currentCheck);
    }
  }
};
</script>